<!--
 * @Author: 王灿
 * @Date: 2019-11-27 23:37:58
 * @LastEditTime: 2019-12-11 00:17:19
 * @Description: 模板管理
 * @FilePath: \scarlet-sparrow-admin\src\views\course\index.vue
 -->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- 课程管理 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 课程模板主题 -->
        <el-table-column prop="theme" label="课程主题"></el-table-column>
        <!-- 课程说明 -->
        <el-table-column prop="courseExplain" label="课程说明"></el-table-column>
        <!-- 主持人 -->
        <el-table-column prop="host" label="主持人"></el-table-column>
        <!-- 主持人介绍 -->
        <el-table-column label="主持人介绍">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.hostIntroduce" />
          </template>
        </el-table-column>
        <!-- 地址 -->
        <!-- <el-table-column label="开课地址">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.province + scope.row.city + scope.row.area + scope.row.detailedAddress" />
          </template>
        </el-table-column> -->
        <!-- 创建时间 -->
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.createAt" />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="onDelete(scope.row.id)" type="text" size="small" class="active">删除</el-button>
            <el-button @click="onRelease(scope.row)" type="text" size="small">发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/编辑 -->
    <el-dialog
      :title="tabTitle"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
    >
      <course-template @onCancelBtn="onCancelBtn" :row="tabRow" />
    </el-dialog>

    <!-- 发布 -->
    <el-dialog
      class="course-dialog"
      :title="tabTitle"
      :visible.sync="isRelease"
      :close-on-click-modal="false"
      width="600px"
    >
      <course-release @onCancelBtn="onCancelBtn" :row="tabRow" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import CourseTemplate from './course-template/index.vue'
import CourseRelease from './course-release/index.vue'
import { getModularList, getModularDelete, getCourseCreate } from '@/api/course.js'
export default {
  name: 'Course',
  components: {
    JqTitle,
    JqTooltip,
    JqPage,
    CourseTemplate,
    CourseRelease
  },
  data() {
    return {
      title: { label: '课程模板', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      // 分页总数
      total: 0,
      // 刷新页面开关
      isRefresh: false,
      // 新增-编辑
      isShow: false,
      tabTitle: '',
      tabRow: {},
      // 发布课程
      isRelease: false
    }
  },
  created() {
    this.onGetModularList()
  },
  watch: {
    // 刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetModularList()
      }
    },
    // 关闭弹窗  清空数据
    isShow() {
      if (!this.isShow) {
        this.tabRow = {}
        this.tabTitle = ''
      }
    }
  },
  methods: {
    // 课程列表
    onGetModularList() {
      getModularList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件通讯 -- 新增
    onTableRow(data) {
      this.isShow = data.isShow
      this.tabTitle = '新增'
      this.isRefresh = false
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.tabTitle = '编辑'
    },
    // 发布
    onRelease(row) {
      this.tabRow = row
      this.isRelease = true
      this.isRefresh = false
      this.tabTitle = '课程发布'
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
      this.isRefresh = true
    },
    // 刷新传值
    onCancelBtn(data) {
      this.isShow = data.isShow
      this.isRelease = data.isShow
      this.isRefresh = data.isRefresh
    },
    // 删除
    onDelete(id) {
      this.$confirm('此操作将删除该课程模板，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
           let form = new FormData()
          form.append('modularId', id) 
          getModularDelete(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetModularList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.course-dialog {
  .el-dialog { 
      overflow: hidden;
      height: 500px!important;
      .el-dialog__body {
        height: calc(500px - 34px);
      }
    }
}
</style>
